<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/basicdata/supplier">供应商管理</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>新建供应商</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="card">
      <div class="card-title">
        <span>新建供应商</span>
      </div>
      <form dForm [layout]="layoutDirection" [labelSize]="'sm'" [labelAlign]="'end'" class="mt-3"
        (dSubmit)="submit($event)">
        <section class="">
          <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId">
            <d-tab id="基本信息" title="基本信息">
              <div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>供应商编码</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="供应商编码" [(ngModel)]="supplier.supplyNum"
                        [dValidateRules]="supplierRules.supplyNum">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>供应商简称</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="供应商简称" [(ngModel)]="supplier.supplyShortName"
                        [dValidateRules]="supplierRules.supplierAbbreviation">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>中文全名</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="中文全名" [(ngModel)]="supplier.supplyChineseName"
                        [dValidateRules]="supplierRules.chineseName">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>英文全名</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="英文全名" [(ngModel)]="supplier.supplyEnglishName">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>账号</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="账号" [(ngModel)]="supplier.supplyAccount">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>密码</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="密码" [(ngModel)]="supplier.supplyPassword">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>供应商类别</d-form-label>
                    <d-form-control>
                      <d-cascader [placeholder]="'供应商类别'" [(ngModel)]="supplierClassId" name="供应商类别"
                        [options]="supplierCategorys" [canSelectParent]="true"  [allowClear]="true"
                        [dValidateRules]="supplierRules.supplierClassId" (ngModelChange)="supplierClassChange($event)">
                      </d-cascader>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label><span class="Required">*</span>业务员</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="业务员" [(ngModel)]="supplier.salesmanName"
                        [dValidateRules]="supplierRules.salesmanName" readonly (click)="salesmanChange()">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>交易币种</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择交易币种"  [filterKey]="'currencyName'" name="币种交易"
                        [options]="currencyOptions" [(ngModel)]="currencyDefault"
                        (valueChange)="currencyOptionsChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>行政区划</d-form-label>
                    <d-form-control>
                      <div class="area">
                        <d-select [options]="[]" name="中国行政区划" [(ngModel)]="supplier.country"></d-select>
                        <d-cascader [placeholder]="'请选择行政区划'" [showPath]="true" [dropdownPanelClass]="'custom-class'"
                          [allowClear]="true" [options]="city" name="行政区划" [(ngModel)]="address"
                          (ngModelChange)="cityChange()">
                        </d-cascader>
                      </div>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>详细地址</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="详细地址(xxx街道xxx路xxx号)" [(ngModel)]="supplier.address">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>电话</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="电话" [(ngModel)]="supplier.phone">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>邮箱</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="邮箱" [(ngModel)]="supplier.email">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>传真</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="传真" [(ngModel)]="supplier.fax">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>联络对象</d-form-label>
                    <d-form-control>
                      <input dTextInput type="text" name="联络对象" [(ngModel)]="supplier.contactPerson">
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>是否开票</d-form-label>
                    <d-form-control>
                      <d-toggle [(ngModel)]="supplier.isInvoicing" name="是否开票"></d-toggle>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>税率 (%)</d-form-label>
                    <d-form-control>
                      <d-input-number [(ngModel)]="taxRate" class="input-number" name="营业税率%" [min]="0" [max]="100"
                        (ngModelChange)="taxRateChange()"></d-input-number>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>付款账期</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择" [options]="collectionPeriodsOptions"
                        [(ngModel)]="collectionPeriodDefault"
                        [filterKey]="'collectionPeriodName'" name="收款账期"
                        (valueChange)="CollectionPeriodChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-2">
                  <d-form-item>
                    <d-form-label>结算方式</d-form-label>
                    <d-form-control>
                      <d-select placeholder="请选择" [options]="settlementMethodOptions"
                        [(ngModel)]="settlementMethodDefault"
                        [filterKey]="'settlementMethodName'" name="结算方式"
                        (valueChange)="settlementMethodsChange($event)"></d-select>
                    </d-form-control>
                  </d-form-item>
                </div>
                <div class="u-1-1">
                  <d-form-item>
                    <d-form-label>
                      <span class="label">附件</span>
                    </d-form-label>
                    <d-form-control>
                      <d-badge [count]="fujianNumber" status="success">
                        <d-button bsStyle="common" (btnClick)="fujian()"><i
                          class="icon icon-upload me-2"></i><span>附件</span></d-button>
                      </d-badge>
                    </d-form-control>
                  </d-form-item>
                </div>
              </div>
            </d-tab>
            <d-tab id="更多联系人" title="更多联系人">
              <div class="linkManbtn">
                <d-button (btnClick)="addLinkMan()">新增联系人</d-button>
              </div>
              <div class="linkMan">
                <d-data-table [dataSource]="tableData" [scrollable]="true" [tableWidthConfig]="tableWidthConfig">
                  <thead dTableHead>
                    <tr dTableRow>
                      <th dHeadCell>操作 </th>
                      <th dHeadCell>联系人</th>
                      <th dHeadCell>电话</th>
                      <th dHeadCell>地址</th>
                      <th dHeadCell>电子邮箱</th>
                      <th dHeadCell>QQ</th>
                      <th dHeadCell>微信</th>
                      <th dHeadCell>是否默认</th>
                    </tr>
                  </thead>
                  <tbody dTableBody>
                    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                      <tr dTableRow>
                        <td dTableCell>
                          <span class="devui-link me-2" (click)="editLinkMan(rowItem,rowIndex)">编辑</span>
                          <span class="devui-link-danger" (click)="remove(rowIndex)">删除</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.supplyContactName">{{rowItem.supplyContactName}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.phone">{{rowItem.phone}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.address">{{rowItem.address}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.email">{{rowItem.email}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.qq">{{rowItem.qq}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem?.weChat">{{rowItem.weChat}}</span>
                        </td>
                        <td dTableCell>
                          <span dTooltip [content]="rowItem.isDefault | booleanToText:'是':'否'"><d-tag [tag]="rowItem.isDefault | booleanToText:'是':'否'" [labelStyle]="rowItem.isDefault">
                          </d-tag></span>
                        </td>
                      </tr>
                    </ng-template>
                </d-data-table>
              </div>
            </d-tab>

          </d-tabs>
        </section>
        <d-form-operation>
          <d-button bsStyle="primary" dFormSubmit>确定</d-button>
          <d-button class="ms-3" bsStyle="common" (click)=" cancle()">取消</d-button>
        </d-form-operation>
      </form>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
